import '../css/manageNews.css';
const list = document.getElementById('list');
import ajax from '../../utils/ajax';
const pagingDiv = document.getElementById('paging');
const pageSize = 15;
let currentPage = 1;
let recordCount;
let search = '';
const searchForm = document.forms.search;

// 1、pageSize | currentPage | recordCount | search
// 2、向服务器发起请求：pageSize | currentPage | search
// 3、得到的数据: 列表 | recordCount

// 业务流程：
// 发起请求：pageSize | currentPage | search 向服务器请求；
// 1、页面初始化时。pageSize: 15, currentPage: 1, search: ''
// 2、点击分页按钮时。currentPage
// 3、点击搜索时。search, currentPage: 1

// 得到响应：
// 1、重新渲染表格。
// 2、重新渲染分页区域。
// 重新获取记录总数，---> 最大页数，




init();

function init() {
    //请求数据
    getNewsList();
    //为分页按钮做点击事件委托
    pagingDiv.onclick = paging_click;
    //当搜索表单提交时
    searchForm.onsubmit = function (e) {
        e.preventDefault();
        search = searchForm.s.value;
        currentPage = 1;
        getNewsList();
    }
}

async function getNewsList() {
    const result = await ajax('get', '/api/manage/getNewsList', { pageSize, currentPage, search });
    if (result.flag) {
        renderTable(result.data.list);
        recordCount = result.data.count;
        renderPaging();
    }
}

function renderTable(data) {
    list.innerHTML = '';
    data.forEach(item => {
        let s = '<tr>';
        s += `<td>${item.id}</td>`;
        s += `<td>${item.title}</td>`;
        s += `<td>${item.auth}</td>`;
        s += `<td>${formatDate(item.updatedAt)}</td>`;
        s += `<td>${formatDate(item.createdAt)}</td>`;
        s += '</tr>';

        list.innerHTML += s;
    });
}

function formatDate(s) {
    var date = new Date(s);
    return date.getFullYear()
}

function renderPaging() {
    const maxPage = Math.ceil(recordCount / pageSize);
    pagingDiv.innerHTML = '';
    let s = '';

    s += `<span>共${recordCount}条</span>`

    //左箭头
    if (currentPage != 1) {
        s += `<span class="btn2" data-index="${currentPage - 1}">&lt;</span>`
    } else {
        s += `<span class="btn1">&lt;</span>`
    }

    //首页
    if (currentPage != 1) {
        s += `<span class="btn2" data-index="1">1</span>`
    } else {
        s += `<span class="btn1" data-index="1">1</span>`
    }

    //前1后1
    let start, end;
    start = currentPage - 1;
    if (start < 2) {
        start = 2;
    }

    end = start + 2;
    if (end > maxPage - 1) {
        end = maxPage - 1
    }

    if (start > 2) {
        s += '...'
    }

    for (let i = start; i <= end; i++) {
        s += `<span class="btn2" data-index="${i}">${i}</span>`
    }

    if (end < maxPage - 1) {
        s += '...'
    }

    //尾页
    if (maxPage > 1) {
        if (currentPage != maxPage) {
            s += `<span class="btn2" data-index="${maxPage}">${maxPage}</span>`
        } else {
            s += `<span class="btn1" data-index="${maxPage}">${maxPage}</span>`
        }
    }

    //右箭头
    if (currentPage != maxPage) {
        s += `<span class="btn2" data-index="${currentPage * 1 + 1}">&gt;</span>`
    } else {
        s += `<span class="btn1">&gt;</span>`
    }

    pagingDiv.innerHTML = s;
    pagingDiv.querySelector(`[data-index='${currentPage}']`).classList.add('active')
}

function paging_click(e) {
    if (e.target.className == 'btn2') {
        currentPage = e.target.dataset.index;
        getNewsList();
    }
}